import React, { forwardRef, useImperativeHandle, useState } from 'react';
import { useSelector } from 'react-redux';
import API from './api';
import { Button, Form, Input } from 'antd';
import { useNavigate } from 'react-router-dom';
const FormComponent = ({ to_login }, ref) => {
  const languages = useSelector((state) => state).publicReducer.language
  const [form] = Form.useForm();
  const navigate = useNavigate()
  const onFinish = async (values) => {
    console.log('666:', values);
    let res = await API.login()
    let result = res.data.filter(item => item.password === values.current)
    if (values.check === values.new) {
      setFlagNew(false)
    } else {
      setFlagNew(true)
    }
    if (result.length !== 0) {
      setFlagOld(false)
    } else {
      setFlagOld(true)
    }
    if (flagNew&&flagOld) {
      to_login()
    }
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const [col, setCol] = useState('black')
  const [flagOld, setFlagOld] = useState(false)
  const [flagNew, setFlagNew] = useState(false)

  useImperativeHandle(ref, () => ({
    form,
  }))
  return (
    <Form
      form={form}
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 9,
      }}
      initialValues={{}}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <hgroup>{languages === 'Korean' ? '비밀번호를 변경해 주세요' : (languages === "English" ? 'Please change your password.' : '请更改密码')}</hgroup>
      <section>{languages === 'Korean' ? '현재 비밀번호' : (languages === "English" ? 'Current password' : '当前密码')}</section>
      <Form.Item
        name="current"
      >
        <Input.Password placeholder='Current Password' />
      </Form.Item>
      {flagOld ? <p className='red'>{languages === 'Korean' ? '비밀번호가 맞지 않습니다.' : languages === "English" ? 'The password is incorrect.' : '密码不正确。'}</p> : <></>}

      <section>{languages === 'Korean' ? '신규 비밀번호' : (languages === "English" ? 'New Password' : '新密码')}</section>
      <Form.Item
        name="new"
      >
        <Input.Password placeholder='New Password' />

      </Form.Item>
      <p className={col}>{languages === 'Korean' ? '영문자와 특수문자, 숫자가 포함된 8자리 이상 입력하세요.' : languages === "English" ? 'Please enter more than 8 letters, special characters and numbers' : '请输入8位以上的字母、特殊字符和数字'}</p>

      <section>{languages === 'Korean' ? '비밀번호 확인' : (languages === "English" ? 'Confirm Password' : '确认密码')}</section>
      <Form.Item
        name="check"
      >
        <Input.Password placeholder='Confirm New Password' />

      </Form.Item>
      {flagNew ? <p className='red'>{languages === 'Korean' ? '비밀번호가 서로 맞지 않습니다.' : languages === "English" ? 'The passwords do not match.' : '密码不相符。'}</p> : <></>}

      <Form.Item
        wrapperCol={{
          offset: 6,
        }}
      >
        <Button type="primary" htmlType="submit" onClick={() => to_login()}>
          {languages === "Korean" ? "취소" : (languages === "Chinese" ? "取消" : "cancel")}
        </Button>
        <Button type="primary" htmlType="submit" className='abtn' >
          {languages === "Korean" ? "확인" : (languages === "Chinese" ? "确认" : "confirm")}
        </Button>
      </Form.Item>
    </Form>
  );
};
export default forwardRef(FormComponent);